<table id="operation_areas" title="" class="easyui-datagrid" style="" url="/admin/operation/areas"
       toolbar="#business-ident-list-datagrid-toolbar" pagination="true" pageSize="50" rownumbers="true" nowrap="false"
       singleSelect="true" pageList="[50,100,150,300]"
       tabPosition="bottom" fitColumns="true" fit="true" showFooter="true" striped="false" data-options="">
    <thead>
    <tr>
        <th data-options="field:'area',align:'center',width:100">区域名称</th>
        <th data-options="field:'id',align:'center',width:30,formatter:OperationAreasModel.operate">操作</th>
    </tr>
    </thead>
</table>
<style>
    label {
        margin-left:8px;
    }
</style>
<div id="business-ident-list-datagrid-toolbar" style="padding:5px;height:auto">
    <form style="margin:15px;">
        <label for="areas_keyword">关键字：</label> <input type="text" class="easyui-textbox" id="areas_keyword" style="margin-right: 5px">
        <a href="javascript:void(0);" onclick="OperationAreasModel.search(this);" class="easyui-linkbutton" data-options="plain:false,iconCls:'icons-table-table'">查询</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" style="margin-left: 20px;" data-options="plain:true,iconCls:'icons-table-table_refresh'" onclick="OperationAreasModel.refresh()">刷新</a>
    </form>
    <a style="margin-left: 20px;" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:false,iconCls:'icons-table-table_add'" onclick="OperationAreasModel.info()">新增</a>
</div>

<script type="text/javascript">

  var OperationAreasModel = {
    dialog: '#globel-dialog-div',
    datagrid: '#operation_areas',

    //操作格式化
    operate: function (val, arr) {
      var btn = [];
      btn.push('<a href="javascript:void(0);" onclick="OperationAreasModel.info(' + val + ')">添加</a>');
      btn.push('<a href="javascript:void(0);" onclick="OperationAreasModel.info(' + val + ')">编辑</a>');
      btn.push('<a href="javascript:void(0);" onclick="OperationAreasModel.delet(' + val + ')">删除</a>');
      return btn.join(' |  ');
    },

    //刷新
    refresh: function () {
      $(this.datagrid).datagrid('reload');
    },

    //新增
    info: function () {
      var that = this;
      $(that.dialog).dialog({
        title: '新增',
        iconCls: 'icons-application-application_add',
        width: 700,
        height: 350,
        cache: false,
        href: "<{:U('admin/operation/add_areas')}>",
        modal: true,
        collapsible: false,
        minimizable: false,
        resizable: false,
        maximizable: false,
        buttons: [{
          text: '确定',
          iconCls: 'icons-other-tick',
          handler: function () {
            $(that.dialog).find('form').eq(0).form('submit', {
              onSubmit: function () {
                var isValid = $(this).form('validate');
                if (!isValid) {
                  return false;
                }
                $.messager.progress({text: '处理中，请稍候...'});
                $.post("<{:U('admin/operation/add_areas')}>", $(this).serialize(), function (res) {
                      $.messager.progress('close');
                      if (res.code != '0000') {
                        $.app.method.tip('提示信息', res.info, 'error');
                      }
                      else {
                        $.app.method.tip('提示信息', res.info, 'info');
                        $(that.dialog).dialog('close');
                        that.refresh();
                      }
                    }, 'json'
                );
                return false;
              }
            });
          }
        }, {
          text: '取消',
          iconCls: 'icons-arrow-cross',
          handler: function () {
            $(that.dialog).dialog('close');
          }
        }]
      });
    },


    //数据查询
    search: function () {
      var keyword = $("#areas_keyword").val();
      $(this.datagrid).datagrid("load", {
        keyword: keyword
      });
    }
  };
  $('#business_ident_list').datagrid({
    queryParams: {
      spid: '<{$spid}>'
    }
  });
</script>